{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/article.css' %}">
{% endblock %}
{% block content %}
    <div class="article">
        <div class="article-header">
            <img src="{% static '/picture/lbt1.jpg' %}" alt="文章封面" class="article-cover">
            <div class="article-meta">
                <h1 class="article-title">{{ read_article.title }}</h1>
                <p>作者：<span class="author">{{ read_article.user_id.name }}</span></p>
                <p>浏览量：<span class="view-count">{{ read_article.view_count }}</span></p>
            </div>
        </div>
        <div class="article-content">
            <p>{{ read_article.content }}</p>
            <!-- 更多文章内容 -->
        </div>
        <div class="article-meta">
            <!-- 其他元数据 -->
            <button class="like-button">点赞
                <span class="like-count">{{ read_article.likes }}</span>
            </button>
        </div>
        <div class="comments">
                <h3>评论区</h3>
                <div class="comment-form">
                    <textarea id="formpl" placeholder="写下你的评论..."></textarea>
                    <button class="submit-comment" id="plBtn">提交评论</button>
                </div>
            </div>
        <div class="comment-section">
                {% for obj,rep in dic.items %}
                <div class="comment">
                    <div class="comment-header">
                        <span class="user-name">{{ obj.user_id.name }}:</span>
                        <span class="comment-text">{{ obj.content }}</span>
                    </div>
                    <div class="comment-body">
                        <!-- <p></p> 或者 <p>这个好厉害</p> -->
                    </div>
                </div>
                    {% for li in rep %}
                        <div class="reply user-c">
                            <div class="reply-text">
                                <div class="reply-header">
                                    <span class="user-name">{{ li.0 }}:{{ li.1 }}：</span>
                                </div>
                                <div class="reply-body">
                                    <p>{{ li.2 }}</p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
<script src="{% static '/js/jquery-3.6.0.min.js' %}"></script>
    <script type="text/javascript">

    $(function () {
        bindBtnEvent();
        bindBtnplEvent();
    })

    function bindBtnEvent() {
        $(".like-button").click(function () {
            $.ajax({
                url: "/article/likes/",  //    => /order/delete/?uid=123
                type: "GET",
                data: {
                    id: {{ read_article.id }}
                },
                dataType: "JSON",
                success: function (res) {
                        alert(res.error);
                        location.reload();
                }
            })
        });
    }

    function bindBtnplEvent() {
        $("#plBtn").click(function () {
            var data = {
                article_id: {{ read_article.id }},
                content: $("#formpl").val()
            }
            $.ajax({
                url: "/article/pl/",  //    => /order/delete/?uid=123
                type: "post",
                data: data,
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        location.reload();
                    } else {
                        // 删除失败
                        alert(res.error);
                    }
                }
            })
        });
    }
</script>
{% endblock %}